<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>${appname}</title>
<%@ include file="/WEB-INF/view/common/css_js_base.jsp"%>
<script>
function openMyBox(){
	$('#mySmallBox').modal('show');
	/**
	show.bs.modal	This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
	shown.bs.modal	This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
	hide.bs.modal	This event is fired immediately when the hide instance method has been called.
	hidden.bs.modal	This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
	loaded.bs.modal	This event is fired when the modal has loaded content using the remote option.
	**/
	
	$('#mySmallBox').on('show.bs.modal', function (e) {
		alert('showing...');
	});
	
	
	$('#mySmallBox').on('shown.bs.modal', function (e) {
		alert('shown');
	});
	
	
	$('#mySmallBox').on('loaded.bs.modal', function (e) {
		alert('loaded...');
	});
	
	
	$('#mySmallBox').on('hide.bs.modal', function (e) {
		alert('hide...');
	});
	
	$('#mySmallBox').on('hidden.bs.modal', function (e) {
		alert('i have been closed!!!');
	});
}
</script>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-12">
			<a href="javascript:openMyBox()" class="btn btn-default btn-lg">open Box</a>
			
			<div id="mySmallBox" class="modal fade smallBox" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
			  <div class="modal-dialog modal-sm">
			   <div class="modal-content">
					<div class="modal-header">
					  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					  <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
					</div>
					<div class="modal-body">
						this is a small box
					</div>
			  	</div>
			  </div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
